---
description:
  Triplex works best with TypeScript as the rich type information is used to
  populate the editor controls, however if you're not yet using TypeScript
  you're still able to use Triplex.
---

Triplex works best with TypeScript as the rich type information is used to
populate the editor controls, however if you're not yet using TypeScript you're
still able to use Triplex.

## Set up config file

Create a config file and populate it.

```sh
touch .triplex/config.json
```

```json
{
  "components": ["../src/components/**/*.jsx"],
  "files": ["../src/**/*.jsx"]
}
```

Where `"components"` is a glob pointing to custom components that can be added
to other components, and `"files"` is a glob pointing to any files you want to
open with Triplex.

## Add type packages

Make sure to add types to your project, even if you're not using TypeScript!

This will make your experience in Triplex that much better as all Three.js
primitives will have their types picked up by the editor to display as controls.

```
npm install @types/react @types/three
```

## Open your project

You're now able to open your project with Triplex! When you do Triplex will add
a `.tsconfig.json` file to the root of your project.

## Get the most out of controls

You can still get some inference for your own components by giving some hints.
For declared props if you add default props to them the editor can infer the
primitive type (string, number, or boolean).

```jsx
export function Component({ color = "red", x = 0, visible = true }) {
  return (
    <mesh visible={visible}>
      <meshBasicMaterial color={color} position={[x, 0, 0]} />
    </mesh>
  );
}
```
